<template>
	<div>
		<div class="wrap-look">
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane :label="item.label" :name="item.name" v-for="(item,index) in retitle" :key="index" ref="tabpane">
					<div class="wrap-ph">
						<el-input prefix-icon="iconfont  icon-shoujiyouxiang" v-model="lookphone" placeholder="请输入常用手机或者邮箱" @blur.native.capture="judgeName"></el-input>
						<div class="phone-box"></div>
						<el-input prefix-icon="iconfont  icon-mima" placeholder="请输入密码" @keyup.enter.native="login" v-model="lookpassword" @blur.native.capture="judgePws" show-password></el-input>
						<div class="phone-box"></div>
						<div class="validate-box">
							<el-input prefix-icon="el-icon-key" placeholder="请输入验证码" @keyup.enter.native="login" v-model="validatecode"></el-input>
							<button class="getValidate" @click="getValidateCode" :class="{'gray':isSend === 'nosend'}" :disabled="isdiabled">{{val}}</button>
						</div>
					</div>
				</el-tab-pane>
				<!--<el-tab-pane label="我要招人" name="second">
					<div class="wrap-ph">
						<el-input prefix-icon="iconfont  icon-shoujiyouxiang" v-model="lookphone" placeholder="请输入常用手机或者邮箱"></el-input>
						<div class="phone-box"></div>
						<el-input prefix-icon="iconfont  icon-mima" placeholder="请输入密码" @keyup.enter.native="firmLogin" v-model="lookpassword" show-password></el-input>
						<div class="phone-box"></div>
						<div class="validate-box">
							<el-input prefix-icon="el-icon-key" placeholder="请输入验证码" @keyup.enter.native="firmLogin" v-model="validatecode"></el-input>
							<button class="getValidate" @click="getValidateCode" :class="{'gray':isSend === 'nosend'}" :disabled="isdiabled">{{val}}</button>
						</div>
					</div>
				</el-tab-pane>-->
			</el-tabs>
		</div>
		<!-- 密码验证 -->
		<div class="wrap-verify">
			<div class="verify-phone">手机验证登陆</div>
			<div class="verify-password">忘记密码</div>
		</div>
		<!-- 按钮 -->
		<p>
			<!--<router-link to="/">-->
			<span class="login" :plain="true" @click="firmLogin">立即注册</span>
			<!--</router-link>-->
		</p>
		<p>
			<a href="javascript:;">
				<span class="register" @click="immeLogin">登陆</span>
			</a>
		</p>
		<ul class="qq-list">
			<li>
				<span>第三方账号登陆</span>
			</li>
			<li>
				<span class="iconfont  icon-weibo font"> </span>
			</li>
			<li>
				<span class="iconfont icon-weixin font"></span>
			</li>
			<li>
				<span class="iconfont  icon-qq font"></span>
			</li>
		</ul>
		<!-- 注册协议 -->
		<p class="deal-box">
			注册代表你已同意
			<a href="#">「万息用户协议」</a>及
			<a href="#">「隐私保护政策」</a>
		</p>
		<!--<button @click="aaa">跳转</button>-->
	</div>
</template>
<script>
	export default {
		data() {
			return {
				activeName: "first",
				lookphone: "15888996655",
				lookpassword: "123456",
				validatecode: "1234",
				val: "获取验证码",
				isSend: 'send',
				isdiabled: false,
				retitle: [{
					label: '找工作',
					name: 'first'
				}, {
					label: '我要招人',
					name: 'second'
				}],
				infiner: '',
			};
		},
		methods: {
			aaa() {
				console.log(this.$refs['tabpane'][0].label)
			},
			//去登陆组件
			immeLogin(){
				this.$emit('fun1',true);
			},
			handleClick(tab, event) {
				this.infiner = tab.label;
			},
			login() {
				if(this.lookphone.trim() == "" || this.lookpassword.trim() == "") {
					this.$message.warning("注册账号或密码不能为空！")
				}
			},
			//公司注册
			firmLogin() {
				if(this.lookphone.trim() == "") {
					this.$message.warning("手机或邮箱不能为空！");
				} else if(this.lookpassword.trim() == "") {
					this.$message.warning("密码不能为空！")
				} else if(this.validatecode.trim() == "") {
					this.$message.warning("验证码不能为空!");
				} else if(this.infiner === '我要招人') {
					this.$router.push({
						name: 'firminfo'
					});
				} else {
					this.$router.push({
						name: 'navlist'
					});
				}
			},
			getValidateCode() {
				this.isSend = "nosend";
				this.isdiabled = true;
				let num = 60
				this.val = "已发送 " + num;
				let timer = setInterval(() => {
					num = --num;
					this.val = "已发送 " + num;
					if(num == 0) {
						clearInterval(timer);
						this.val = "重新发送";
						this.isSend = "send";
						this.isdiabled = false;
					}
				}, 1000)
			},
			judgeName() {
				if(this.lookphone.trim() == "") {
					this.$message.warning("账号不能为空！");
				} else if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.lookphone))) {
					this.$message.warning("账号格式错误！");
				}
			},
			judgePws() {
				if(this.lookpassword.trim() == "") {
					this.$message.warning("密码不能为空！");
				}
			}
		}
	};
</script>
<style scoped>
	ul,
	li {
		margin: 0px;
		padding: 0px;
		list-style: none;
	}
	
	a {
		text-decoration: none;
	}
	
	.wrap-look {
		max-width: 350px;
		margin: 0 auto;
		/* border: 1px solid red; */
	}
	
	.wrap-ph {
		margin-top: 20px;
	}
	
	.phone-box {
		height: 30px;
	}
	
	.wrap-verify {
		display: flex;
		max-width: 350px;
		justify-content: space-between;
		margin: 0 auto;
		margin-top: 15px;
	}
	
	.verify-password {
		color: #ccc;
		cursor: pointer;
	}
	
	.verify-phone {
		cursor: pointer;
		color: #00bfff;
	}
	
	.qq-list {
		max-width: 350px;
		margin: 0 auto;
		/* border: 1px solid red; */
		overflow: hidden;
		margin-top: 30px;
	}
	
	.qq-list li {
		text-align: center;
		float: left;
	}
	
	.font {
		font-size: 24px;
		margin: 0px 20px;
		color: #ccc;
		cursor: pointer;
	}
	
	.font:hover {
		color: #00bfff;
	}
	
	.qq-list li:nth-of-type(1) span {
		display: inline-block;
		padding-top: 3px;
		margin-right: 5px;
		/* color: #ccc; */
	}
	
	.wrap-input {
		max-width: 350px;
		margin: 0 auto;
		margin-top: 30px;
	}
	
	.login-phone {
		width: 100%;
		height: 30px;
		border: 1px solid #ccc;
		border-radius: 5px;
		padding-left: 5px;
	}
	
	a {
		text-decoration: none;
	}
	
	.login {
		display: inline-block;
		padding: 10px 0px;
		width: 350px;
		color: #fff;
		letter-spacing: 5px;
		background: #00bfff;
		margin-top: 30px;
		border-radius: 5px;
		cursor: pointer;
	}
	
	.register {
		display: inline-block;
		padding: 10px 0px;
		width: 350px;
		color: #fff;
		letter-spacing: 2px;
		background: #00bfff;
		border-radius: 5px;
	}
	
	.login:hover {
		background: #87ceff;
	}
	
	.register:hover {
		background: #87ceff;
	}
	
	.deal-box {
		width: 100%;
		margin-top: 25px;
		text-align: center;
		font-size: 12px;
		color: #999;
		min-height: 40px;
	}
	
	.deal-box a {
		color: #00BFFF;
	}
	/*验证码框*/
	
	.validate-box {
		position: relative;
		cursor: pointer;
		/*line-height: 40px;*/
	}
	
	.validate-box .getValidate {
		position: absolute;
		top: 10px;
		right: 20px;
		/*width: 60px;*/
		height: 20px;
		line-height: 20px;
		text-align: left;
		padding-left: 10px;
		/*border: 1px solid red;*/
		border: none;
		outline: none;
		cursor: pointer;
		border-left: 1px solid #ccc;
		background-color: #fff;
		/*color: #999;*/
		color: #00CFFF;
	}
	
	div.validate-box .gray {
		color: #999;
	}
</style>